import React, { useState, forwardRef } from 'react';
import './index.scss';

export interface HorizontalTabsProps {
  /**
   * 标签页数据
   */
  tabs?: Array<{
    key: string;
    title: string;
    content?: string;
    icon?: string; // 新增图标支持
  }>;
  /**
   * 默认激活的标签页
   */
  defaultActiveKey?: string;
  /**
   * 标签页切换回调
   */
  onChange?: (key: string) => void;
  /**
   * 是否显示内容区域
   */
  showContent?: boolean;
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  /**
   * 自定义类名
   */
  className?: string;
}

const HorizontalTabs = forwardRef<HTMLDivElement, HorizontalTabsProps>(function HorizontalTabs({
  tabs = [
    { 
      key: '1', 
      title: '综合压力表', 
      content: '综合压力表内容',
      icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge7ca53bd07d228d254f7c9b0a3f82ffbb40ab24e0ec7b818f0dde38c559064d8'
    },
    { 
      key: '2', 
      title: '舆情风向标', 
      content: '舆情风向标内容',
      icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng35491b61da9ede2a0824b041c157090275cd90ae715403e84a08ae0f3723146f'
    },
    { 
      key: '3', 
      title: '改革助力窗', 
      content: '改革助力窗内容',
      icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5164c9923f6e1d89bd797030f8304aca736ce37f3027c8d1cc9750ac480ada94'
    },
    { 
      key: '4', 
      title: '告警中心', 
      content: '告警中心内容',
      icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge9eb21e8b2d096e398185fa942668addafa7bbbb2bd76a0f8a2642a2d7379537'
    }
  ],
  defaultActiveKey = '1',
  onChange,
  showContent = false,
  style = {},
  className = '',
  ...otherProps
}, ref) {
  const [activeKey, setActiveKey] = useState(defaultActiveKey);

  const handleTabClick = (key: string) => {
    setActiveKey(key);
    onChange?.(key);
  };

  // 构建CSS类名
  const tabsClassName = [
    'horizontal-tabs',
    !showContent ? 'nav-only' : '',
    className
  ].filter(Boolean).join(' ');

  // 获取当前激活标签的内容
  const activeTab = tabs.find(tab => tab.key === activeKey);

  // 渲染标签项内容
  const renderTabContent = (tab: any) => {
    if (tab.icon) {
      // 包含图标和文字
      return (
        <>
          <img
            className="tab-icon"
            src={tab.icon}
            referrerPolicy="no-referrer"
            alt={tab.title}
          />
          <span className="tab-text">
            {tab.title}
          </span>
        </>
      );
    }
    return tab.title;
  };

  return (
    <div
      ref={ref}
      className={tabsClassName}
      style={style}
      {...otherProps}
    >
      {/* 标签栏 */}
      <div className="tabs-header">
        <div className="tabs-nav">
          {tabs.map(tab => (
            <button
              key={tab.key}
              className={`tab-item ${tab.key === activeKey ? 'active' : ''}`}
              onClick={() => handleTabClick(tab.key)}
              type="button"
            >
              {renderTabContent(tab)}
            </button>
          ))}
        </div>
      </div>

      {/* 内容区域 */}
      {showContent && activeTab && (
        <div className="tab-content">
          {activeTab.content || `${activeTab.title}的内容`}
        </div>
      )}
    </div>
  );
});

HorizontalTabs.displayName = 'HorizontalTabs';
export default HorizontalTabs;
